<template>
    <div class="div">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content first">
            <div class="title1">今日顾客统计</div>
            <div class="div">
              <div class="div1">50</div>
              <div class="div2">+10%&nbsp&nbsp同上周相比</div>
            </div>
            <div class="img">
              <img src="../../../assets/images/07.png" alt="" class="img1">
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content  second">
            <div class="title1">开单宠物统计</div>
            <div class="div">
              <div class="div1">48</div>
              <div class="div2">+9%&nbsp&nbsp同上周相比</div>
            </div>
            <div class="img">
              <img src="../../../assets/images/08.png" alt="" class="img1">
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content  third">
            <div class="title1">今日就诊金额</div>
            <div class="div">
              <div class="div1">35080</div>
              <div class="div2">-5%&nbsp&nbsp同上周相比</div>
            </div>
            <div class="img">
              <img src="../../../assets/images/09.png" alt="" class="img1">
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content  four">
            <div class="title1">今日会员金额</div>
            <div class="div">
              <div class="div1">40</div>
              <div class="div2">+20%&nbsp&nbsp同上周相比</div>
            </div>
            <div class="img"><img src="../../../assets/images/10.png" alt="" class="img1"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="div2">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content5">
            <div class="title">代办事项</div>
            <div class="grid">
              <div class="dai1" >
                <span class="span1">[系统问题医嘱单]</span>
                <span class="span1-1">待分配</span>
              </div>
              <div class="dai1-1">
                <span class="span2">医生开医嘱单出现问题异常，请技术修复</span>
                <span class="span2-2"> 2022-10-10</span>
              </div>
              <div class="dai2">
                <span class="span3">[确认药品出库单]</span>
                <span class="span3-1">处理中</span>
              </div>
              <div class="dai2-1">
                <span class="span4">医嘱单号编号:CS20221010234567</span>
                <span class="span4-1">2022-10-10</span>
              </div>
              <div class="dai3">
                <span class="span5">[销售问题出库单]</span>
                <span class="span5-1">待审批</span>
              </div>
              <div class="dai3-1">
                <span class="span6">销售药品缺货，尽快联系补货</span>
                <span class="span6-1">2022-10-12</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content5" id="main2">
          
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content6" id="main3"></div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content6" id="main4"></div>
        </el-col>
      </el-row>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

let myChart2: any;
let myChart3: any;
let myChart4: any;
const init2 = () => {
  const main2 = document.getElementById("main2");
  if (main2) {
    // 基于准备好的dom，初始化echarts实例
    myChart2 = echarts.init(main2);
    // 绘制图表
    myChart2.setOption({
      title:{
        text:"就诊宠物统计",
        top: 10,
        left: 20,
        textStyle:{
          fontSize: 12,
        }
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "60%"],
          center: ["25%", "50%"],
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 5,
          },
          label: {
            show: false,
            position: "center",
            fontSize: 30,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 2048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "60%"],
          center: ["75%", "50%"],
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 5,
          },
          label: {
            show: false,
            position: "center",
            fontSize: 30,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 2048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
      ],
    });
  }
};

const init3 = () => {
  const main3 = document.getElementById("main3");
  if (main3) {
    // 基于准备好的dom，初始化echarts实例
    myChart3 = echarts.init(main3);
    // 绘制图表
    myChart3.setOption({
      title: {
        text: "治疗金额技术统计",
        top: 10,
        left: 20,
        textStyle: {
          fontSize: 14,
        },
        subtext: "单位(万元)",
      },
      grid: {
        top: 70,
        bottom: 40,
      },
      xAxis: {
        type: "category",
        data: ["李想", "王伟", "唐越", "张三", "李四", "王五", "贾六"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#83bff6" },
              { offset: 0.5, color: "#188df0" },
              { offset: 1, color: "#188df0" },
            ]),
          },
          barWidth: 30,
        },
      ],
    });
  }
};

const init4 = () => {
  const main4 = document.getElementById("main4");
  if (main4) {
    // 基于准备好的dom，初始化echarts实例
    myChart4 = echarts.init(main4);
    // 绘制图表
    myChart4.setOption({
      title:{
        text:"销售金额趋势",
        top: 10,
        left: 20,
        textStyle:{
          fontSize: 12,
        },
        subtext: "单位(万元)",
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [38, 36, 45, 55, 65, 54, 50, 44, 57, 54, 33, 29],
          type: 'line'
        }
      ]
    });
  }
};

onMounted(() => {
  init2();
  init3();
  init4()
  window.onresize = () => {
    myChart2.resize();
    myChart3.resize();
    myChart4.resize()
  };
});

onBeforeUnmount(() => {
  myChart2.dispose();
  myChart3.dispose();
  myChart4.dispose();
});
</script>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  padding: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
  height: 150px;

  .first {
    background: linear-gradient(to right, #eb7774, #ee8f64);
  }

  .second {
    background: linear-gradient(to right, #6B82F6, #48A2F7);
  }

  .third {
    background: linear-gradient(to right, #C560F8, #835EF6);
  }

  .four {
    background: linear-gradient(to right, #9BE069, #75DC8B);
  }
}

.grid-content {
  border-radius: 4px;
  height: 150px;
  position: relative;

  .title1 {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    padding: 10px 0 20px 10px;

    &::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      background-color: #fff;
      margin-right: 10px;
      border-radius: 50%;
    }
  }

  .div {
    width: 110px;
    height: 60px;
    color: #fff;
    margin-left: 20px;

    .div1 {
      width: 40px;
      height: 40px;
      font-size: 30px;
    }

    .div2 {
      margin-top: 10px;
      font-size: 8px;
    }
  }

  .img {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 40px;
    right: 20px;

    .img1 {
      width: 70px;
      height: 70px;
    }
  }
}

.grid-content5 {
  border-radius: 4px;
  height: 200px;
  background-color: #ccc;
}

.grid-content6 {
  border-radius: 4px;
  height: 200px;
  background-color: #ccc;
}

.title {
  font-size: 14px;
  display: inline-block;
  margin-top: 15px;
  margin-left: 15px;

  &::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
    margin-right: 5px;
  }
}
.grid{
  margin-left: 15px;
  margin-right: 15px;
  .dai1,.dai2,.dai3{
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    .span1-1,.span3-1,.span5-1{
      color: #fff;
      font-size: 10px;
      &::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
        background-color: #29C8FC;
      }
    }
    }
  .dai1-1,.dai2-1,.dai3-1{
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #fff;
  }
}
.div {
  width: 100%;
  margin-left: -20px;
}
.div2 {
  width: 100%;
  margin-top: -20px;
  margin-left: -20px;
}
.main2-1{
  font-weight: 600px;
  
}
</style>